import React, {useEffect, useState} from "react";
import {Row, Col, Table, Breadcrumb, Tabs, Card} from "antd";
import {LeftOutlined} from "@ant-design/icons";
import environmentStore from "../store/environmentStore";
import {useHistory, useParams} from "react-router";
import EnvVariableList from "./EnvVariableList";
import "./envStyle.scss";
import EnvServerTable from "./EnvServerTable";
import EnvVariableTable from "./EnvVariableTable";

const { TabPane } = Tabs;

const EnvironmentDetail = (props) => {
    const {
        findEnvironment
    } = environmentStore;

    const {envId} = useParams()
    const history = useHistory();

    const [data, setData] = useState({});

    useEffect(async ()=>{
        let res = await findEnvironment( envId);
        if(res.code===0){
            setData(res.data)
        }
    },[envId])

    return (
        <div className="environment-detail-container">
            <Row>
                <Col
                    xs={{ span: "24" }}
                    sm={{ span: "24" }}
                    md={{ span: "24" }}
                    lg={{ span: "24" }}
                    xl={{ span: "22", offset: "1" }}
                    xxl={{ span: "18", offset: "3" }}
                >
                    {/* 头部面包屑区域 */}
                    <div className="header-section">
                        <Breadcrumb className="breadcrumb-box">
                            <Breadcrumb.Item className="first-item" onClick={()=>history.push("/workspace/setting/env")}>
                                <LeftOutlined />
                                环境
                            </Breadcrumb.Item>
                            <Breadcrumb.Item>{data?.name}</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>

                    {/* 内容区域 */}
                    <Tabs
                        defaultActiveKey="1"
                        className="environment-tabs"
                        tabBarStyle={{ marginBottom: 16 }}
                    >
                        <TabPane tab="服务" key="1">
                            <div className="tab-content">
                                <EnvServerTable envId={envId}/>
                            </div>
                        </TabPane>
                        <TabPane tab="变量" key="2">
                            <div className="tab-content">
                                <EnvVariableTable envId={envId}/>
                            </div>
                        </TabPane>
                    </Tabs>
                </Col>
            </Row>
        </div>
    );
};

export default EnvironmentDetail;
